
const box = document.querySelector(".box");
const list = document.querySelector(".list");
const listli = document.querySelectorAll(".list li");
const len = document.querySelectorAll(".page li").length;
const ltBtn = document.querySelector(".prev");
const rtBtn = document.querySelector(".next");
const page = document.querySelector(".page");
const pageli = document.querySelectorAll(".page li");
let curIndex = 0;
ltBtn.onclick = function () {
    curIndex--;
    if (curIndex <= -1) {
        curIndex = len - 1;
    }
    console.log(listli.length);
    for (let i = 0; i < listli.length; i++) {
        listli[i].classList.remove("on");
    }
    listli[curIndex].classList.add("on");
    for (let j = 0; j < pageli.length; j++) {
        pageli[j].classList.remove("on");
    }
    pageli[curIndex].classList.add("on");
};
rtBtn.onclick = function () {
    curIndex++;
    if (curIndex >= len) {
        curIndex = 0;
    }
    for (let i = 0; i < listli.length; i++) {
        listli[i].classList.remove("on");
    }
    listli[curIndex].classList.add("on");
    for (let j = 0; j < pageli.length; j++) {
        pageli[j].classList.remove("on");
    }
    pageli[curIndex].classList.add("on");
};

for (let i = 0; i < pageli.length; i++) {
    //ol下的li全部添加了data-index属性,意思就是给每个li加上了属于自己的序号
    pageli[i].setAttribute("data-index", i);
    pageli[i].onclick = function () {
        console.log(this.getAttribute("data-index"));
        curIndex = this.getAttribute("data-index");
         for (let i = 0; i < listli.length; i++) {
                listli[i].classList.remove("on");
             }
        listli[curIndex].classList.add("on");
        for (let j = 0; j < pageli.length; j++) {
            pageli[j].classList.remove("on");
        }
        pageli[curIndex].classList.add("on");
    };
}
let timer = setInterval(function () {
    rtBtn.onclick();
}, 3000);
box.onmouseenter = function () {
    clearInterval(timer);
};
box.onmouseleave = function () {
    timer = setInterval(function () {
        rtBtn.onclick();
    }, 3000);
};